<template>
    <a-card class="min-h-[68px] rounded my-[10px]"
            :body-style="{ padding: '0px 10px', minHeight: '700px' }"
            :bordered="false">
            <template #extra>
                <a-button class="border-none"
                          icon="rollback"
                          @click="rollback">{{ $t("app.setting.themecolor.rr99") }}
                </a-button>
              </template>
              <!-- <a-progress v-bind:width="400" stroke-linecap="square" :percent="questionnaireInfo.percent"
                          :steps="questionnaireInfo.ModelTopicOver"
                          :format="percent => `${thisProcess}/${questionnaireInfo.ModelTopicCount}`"/> -->
              <!-- 正文头部 -->
              <div slot="title">
                <a-space>
                  <div class="ty"></div>
                  {{ $t("user.verification-code.required1115661105718") }}
                </a-space>
              </div>
      <!-- 头部导航+查看RPA详情 -->
      <div style="margin: 30px 10px 0px 20px">
        <div style="display: flex; justify-content: space-between">
          <!-- 查看详情 -->
          <div style="
              margin-left: 20px;
              margin-top: -6px;
              right: 0;
              position: absolute;
              margin-right: 20px;
              z-index: 5;
            ">
            <rpaDetail :rpaDetailId="id" />
          </div>
        </div>
      </div>
      <div class="card-box">
        <div class="card-left">
          <p class="left-title">
            {{ $t("user.verification-code.required11156611036") }}
          </p>
          <ul style="padding-left: 15px">
            <li v-for="(item, i) in chapterLists"
                :key="item.title">
              <a-space align="center">
                <a-badge status="processing"
                         style="margin-right: -40px; margin-bottom: 3px"
                         v-if="item.check" />
                <a-button type="link"
                          @click="changeChapter(item, i)">{{ item.title }}
                </a-button>
              </a-space>
            </li>
          </ul>
        </div>
        <!-- 主列表 -->
        <div class="card-right">
          <a-row>
            <a-space class="mb-[15px]">
              <div class="tags"></div>
              {{ $t("user.verification-code.required11156611037") }}
            </a-space>
            <div v-if="RpaNoPIOrImportantInvolved ==1 ">
              <p> Dear user, you do not need to answer the DPIA questionnaire since you have chosen No Personal Information or
                Important Data Involved in your RPA. </p>
              <p>You can submit this request to DCO for approval, or go back to RPA to modify. </p>
            </div>
  
            <a-table ref="table"
                     v-if="RpaNoPIOrImportantInvolved ==0"
                     size="middle"
                     class="h-full overflow-x-auto mb-[80px]"
                     :pagination="dpiaSimpleAnswerPagination"
                     :dataSource="dpiaSimpleAnswerLists"
                     :rowKey="(record) => record.Id"
                     @change="tableChange"
                     width="150px">
              <a-table-column key="DpiaChapterTopic"
                              data-index="DpiaChapterTopic"
                              width="300px">
                <span slot="title"
                      class="min-w-90p">{{
                  $t("user.verification-code.required11156611055")
                }}</span>
              </a-table-column>
              <a-table-column key="DpiaChapterTopicAnswer"
                              data-index="DpiaChapterTopicAnswer">
                <span slot="title"
                      class="min-w-90p">{{
                  $t("user.verification-code.required111566110056")
                }}</span>
                <span key="DpiaChapterTopicAnswer"
                      slot-scope="text, record">
                  <span v-html="text"></span>
                  {{
                    record.DpiaChapterTopicType === 1 &&
                    record.DpiaChapterTopicRequired
                      ? `(${$t(
                          "user.verification-code.required111566110577666"
                        )}:${record.DpiaChapterTopicRequired})`
                      : ""
                  }}
                </span>
              </a-table-column>
            </a-table>

            <!-- 2. -->
          <div>{{Question2Topic}}</div>
          <a-table ref="table"
                   v-if="RpaNoPIOrImportantInvolved ==0 && this.dpiaSimpleAnswerLists2.length > 0"
                   size="middle"
                   class="h-full overflow-x-auto mb-[80px]"
                   :pagination="dpiaSimpleAnswerPagination"
                   :dataSource="dpiaSimpleAnswerLists2"
                   :rowKey="(record) => record.Id"
                   @change="tableChange"
                   width="150px">
            <!-- 数据字段 -->
            <a-table-column key="SourceChildNames"
                            data-index="SourceChildNames"
                            >
              <span slot="title"
                    class="min-w-90p">{{
                $t("user.v122")
              }}</span>
            </a-table-column>
             <!-- 处理目的及必要性 -->
             <a-table-column key="PurposeNecessityHandling"
                            data-index="PurposeNecessityHandling"
                           >
              <span slot="title"
                    class="min-w-90p">{{
                $t("user.v123")
              }}</span>
            </a-table-column>
             <!-- 最小必要类型 -->
             <a-table-column key="MinimumNecessaryType"
                            data-index="MinimumNecessaryType"
                            >
              <span slot="title"
                    class="min-w-90p">{{
                $t("user.v124")
              }}</span>
            </a-table-column>
             <!-- 通过何种途径取得个人同意 -->
             <a-table-column key="ObtainPersonalConsent"
                            data-index="ObtainPersonalConsent"
                            >
              <span slot="title"
                    class="min-w-90p">{{
                $t("user.v125")
              }}</span>
            </a-table-column>
             <!-- 备注: -->
             <a-table-column key="remarks"
                            data-index="remarks"
                           >
              <span slot="title"
                    class="min-w-90p">{{
                $t("user.verification-code.required111566181")
              }}</span>
            </a-table-column>
          </a-table>

          </a-row>
        </div>
      </div>
      <!-- 下方按钮 -->
      <div class="btns"
           :style="{
          position: 'absolute',
          right: 0,
          bottom: 0,
          width: '100%',
          borderTop: '1px solid #e9e9e9',
          padding: '20px 16px',
          background: '#fff',
          textAlign: 'center',
          zIndex: 1,
        }">
        <!-- 返回 -->
        <a-button type="primary"
                  @click="saveup()"
                  style="margin-right: 20px">
          {{ $t("app.setting.themecolor.rr") }}
        </a-button>
        <!-- 预览报告 -->
        <!-- <a-button type="primary" @click="viewbook()" style="margin-right: 20px;">{{
          $t('user.verification-code.required111566110577371442281431555') }}</a-button> -->
        <!-- 上一步 -->
        <a-button type="primary"
                  v-show="num != 0 && num != undefined"
                  @click="next(num--)"
                  style="margin-right: 20px">{{ $t("user.verification-code.required11156611057725911") }}</a-button>
        <!-- 下一模块 -->
        <a-button type="primary"
                  @click="next(num++)"
                  v-show="chapterLists.length - 1 > num">
          {{ $t("user.verification-code.required111566110577259") }}
        </a-button>
      </div>
    </a-card>
  </template>
  
  <script>
  import {
    dpiaQuestionChapterLists,
    dpiaQuestionInfo,
    dpiaSimpleAnswer,
    dpiaQuestionChangeStatus,
    dpiaSimpleAction,
  } from '@/api/dpia/form'
  import RpaDetail from '../../dataAssessment/dpia/onequestion/components/rpaDetail.vue'
  import { userQuery } from '@/api/common/form'
  import { quesionFindRpaId, rpaDetail } from '@/api/rpa/form'
  
  export default {
    components: {
      RpaDetail,
    },
    mounted() {},
    props: {
    dpiaid: {
      type: String,
    },
    state: {
      type: String,
    },
    itLang: {
      type: String,
    },
  },
    data() {
      return {
        // 章节答题内容
        columns: [
          // {
          //   title: '题目类型',
          //   className: 'min-w-90p',
          //   dataIndex: 'DpiaChapterTopicType',
          //   scopedSlots: { customRender: 'topicTypeAction' },
          //   align: 'center',
          // },
          {
            title: '题目',
            width: '440px',
            dataIndex: 'DpiaChapterTopic',
            align: 'center',
          },
  
          {
            title: '回答内容',
            className: 'min-w-30p',
            dataIndex: 'DpiaChapterTopicAnswer',
            align: 'center',
            scopedSlots: { customRender: 'dpiaChapterTopicAnswer' },
          },
        ],
        // Action内容
        actionColumns: [
          {
            title: 'Action编号',
            className: 'min-w-90p',
            dataIndex: 'DpiaActionIdTag',
            align: 'center',
          },
          {
            title: '合规要求名称',
            className: 'min-w-90p',
            dataIndex: 'DpiaActionName',
            align: 'center',
          },
          {
            title: 'Action来源',
            className: 'min-w-90p',
            dataIndex: 'DpiaActionSource',
            align: 'center',
          },
          {
            title: '责任人',
            className: 'min-w-90p',
            dataIndex: 'DpiaActionUserResponsible',
            align: 'center',
          },
          {
            title: '发起时间',
            className: 'min-w-90p',
            dataIndex: 'DpiaActionCreatetime',
            align: 'center',
          },
          {
            title: '合规要求描述',
            className: 'min-w-90p',
            dataIndex: 'DpiaActionResult',
            align: 'center',
          },
        ],
        dco: undefined,
        // DCO列表
        userList: [],
        // DCO按钮
        dcoButtom: false,
  
        // 上一页按钮控制
        previousPageButtom: true,
  
        // 下一页按钮控制
        nextPageButtom: true,
  
        value: '',
        visible: false,
  
        // 配置分页
        dpiaSimpleAnswerPagination: {
          page: 1,
          pageSize: 10,
          total: 0,
          current: 1,
        },
        dpiaSimpleActionPagination: {
          page: 1,
          pageSize: 1,
          total: 0,
        },
  
        // 左侧的章节列表
        chapterLists: [],
  
        // 基础答题信息
        questionnaireInfo: {},
  
        // 问题和答案数据
        dpiaQuestionTopicAnswer: {},
  
        // 问卷ID
        id: '',
  
        // 获取用户问题答案
        dpiaQuestionUserAnswer: {},
  
        // 当前题型
        topicType: 0,
  
        // 是否结束
        finishStatus: 0,
  
        // 已答题的结果
        dpiaQuestionUserLastAnswer: '',
  
        // 答题章节内容
        dpiaSimpleAnswerLists: [],
        dpiaSimpleAnswerLists2:[],
  
        // Action列表
        dpiaSimpleActionLists: [],
  
        //chapter Id
        chapterId: 0,
  
        //上一章/下一章
        num: 0,
        lang: localStorage.getItem('lang').includes('zh-CN'),
        //特殊题型
        RpaIfCompletedPIA: 0,
        RpaNoPIOrImportantInvolved: 0,
        
        Question2Topic:'',
      }
    },
    created() {
      this.init()
    },
    mounted() {
      let that = this
      window.addEventListener('setItemEvent', function (e) {
        if (e.key == 'lang') {
          let lang = JSON.parse(e.value)
          if (lang == 'zh-EN') {
            that.lang = false
          } else {
            that.lang = true
          }
          that.changeChapter({ id: that.chapterId }, that.num)
        }
      })
    },
    methods: {
      async getList() {
        try {
          // 默认获取第一章节
          const { data: dpiaSimpleAnswerObject } = await dpiaSimpleAnswer({
            id: this.id,
            DpiaChapterId: this.chapterId,
            lang: this.lang ? 0 : 1,
            page: this.dpiaSimpleAnswerPagination.Page,
            pageSize: this.dpiaSimpleAnswerPagination.pageSize,
          })
          const { Page, PageSize, Total, Lists,Question2,Question2Topic } = dpiaSimpleAnswerObject
          this.dpiaSimpleAnswerLists = Lists
          this.dpiaSimpleAnswerLists2 = Question2
          this.Question2Topic = Question2Topic
          this.dpiaSimpleAnswerPagination = {
            page: Page,
            pageSize: PageSize,
            total: Total,
          }
        } catch (error) {
          console.log('error:', error)
          this.$message.error(error)
        }
      },
      //分页的方法
      tableChange(e, searchInputs, pagination) {
        this.dpiaSimpleAnswerPagination.Page = e.current
        this.getList()
      },
      async changeChapter(items, i) {
        if (i) {
          this.num = i
        }
        // 如果是新的章节，默认给它重置一下
        // 保障是首次分页
        // 因为Current默认有效，所以，在重置时记得把current重置为1
        if (items.id != this.chapterId) {
          this.dpiaSimpleAnswerPagination = {
            page: 1,
            pageSize: 10,
            total: 0,
            current: 1,
          }
        }
        this.chapterId = items.id
  
        try {
          // 默认获取第一章节
          const { data: dpiaSimpleAnswerObject } = await dpiaSimpleAnswer({
            id: this.id,
            DpiaChapterId: items.id,
            lang: this.lang ? 0 : 1,
          })
          const { Page, PageSize, Total, Lists ,Question2 ,Question2Topic} = dpiaSimpleAnswerObject
          
          this.dpiaSimpleAnswerLists = Lists
          this.dpiaSimpleAnswerLists2 = Question2
          this.Question2Topic = Question2Topic
          // this.RpaIfCompletedPIA = rpaDetailInfo.RpaIfCompletedPIA
          // this.RpaNoPIOrImportantInvolved =
          //   rpaDetailInfo.RpaNoPIOrImportantInvolved
          if (this.RpaIfCompletedPIA == 1) {
            this.dpiaSimpleAnswerLists[0].DpiaChapterTopicAnswer =
              this.RpaPIALinkUrl
          }
          this.dpiaSimpleAnswerPagination = {
            page: Page,
            pageSize: PageSize,
            total: Total,
          }
  
          const { page, pageSize } = this.dpiaSimpleActionPagination
          // 默认获取第一章节
          const { data: dpiaSimpleActionObject } = await dpiaSimpleAction({
            Id: this.id,
            ChapterId: this.chapterId,
            page,
            pageSize,
          })
          const {
            Page: page1,
            PageSize: pageSize1,
            Total: total1,
            Lists: Lists1,
          } = dpiaSimpleActionObject
  
          this.dpiaSimpleActionLists = Lists1
          this.dpiaSimpleActionPagination = {
            page: page1,
            pageSize: pageSize1,
            total: total1,
          }
        } catch (error) {
          console.log('error:', error)
          this.$message.error(error)
        }
      },
      async actions() {
        // 获取关联的Action
        try {
          const { page, pageSize } = this.dpiaSimpleActionPagination
          // 默认获取第一章节
          const { data: dpiaSimpleActionObject } = await dpiaSimpleAction({
            Id: this.id,
            ChapterId: this.chapterId,
            page,
            pageSize,
          })
          const { Page, PageSize, Total, Lists } = dpiaSimpleActionObject
  
          this.dpiaSimpleActionLists = Lists
          this.dpiaSimpleActionPagination = {
            page: Page,
            pageSize: PageSize,
            total: Total,
          }
        } catch (error) {
          console.log('error:', error)
          this.$message.error(error)
        }
      },
  
      async init() {
        this.chapterId = 0
        try {
          // 初始化题库
          var id = this.$route.query.id
  
          this.id = id
          const { data: rpaDetails } = await quesionFindRpaId({ Id: id })
          // 获取RPA详情
          const { data: rpaDetailInfo } = await rpaDetail({
            Id: rpaDetails.DpiaRpaId,
          })
          this.RpaPIALinkUrl = rpaDetailInfo.RpaPIALinkUrl
          this.RpaIfCompletedPIA = rpaDetailInfo.RpaIfCompletedPIA
          this.RpaNoPIOrImportantInvolved =
            rpaDetailInfo.RpaNoPIOrImportantInvolved
          // 章节列表
          const { data: chapterLists } = await dpiaQuestionChapterLists({
            id: id,
          })
          this.chapterLists = chapterLists
  
          // 默认获取第一章节q1
          await this.changeChapter({ id: this.chapterLists[0].id })
  
          // 获取初步评估Action
          await this.actions()
  
          // 基础信息查询
          const { data: questionnaireInfo } = await dpiaQuestionInfo({
            id: this.id,
          })
          this.questionnaireInfo = questionnaireInfo
        } catch (error) {
          console.log('error:', error)
          this.$message.error(error)
        }
      },
      async showModal() {
        this.visible = true
        // 获取用户列表下拉
        const { data: userList } = await userQuery(1)
  
        this.userList = userList
      },
      async handleOk(e) {
        // 交卷
        if (this.dco == undefined) {
          this.$message.error(
            this.$t('user.verification-code.required111566110577268')
          )
          return
        }
        try {
          console.log('1111')
          await dpiaQuestionChangeStatus({
            Id: this.id,
            DpiaStatus: 2,
            DpiaDcoUserId: this.dco,
          })
          this.$message.success(
            this.$t('user.verification-code.required111566110577270')
          )
        } catch (error) {
          this.$message.error(error)
        }
  
        this.topicShow()
        this.visible = false
        // 开启那个结果页
        this.finishStatus = 1
      },
  
      rollback() {
        this.$router.push('/Portal')
        // this.$router.go(-1);
      },
  
      //返回
      async saveup() {
        this.$router.push('/Portal')
        // this.$router.go(-1);
      },
      //预览报告
      async viewbook() {
        //调接口
        // try {
        //   await rickActiondel({ Id: id })
        //   this.$message.success(this.$t('user.verification - code.required111566110577308'))
        //   this.$router.push({ path: '/dpia' })
        // } catch (error) {
        //   this.$message.error(error)
        // } finally {
        // }
      },
      async next() {
        let items = null
        if (this.num < this.chapterLists.length) {
          items = this.chapterLists[this.num]
        }
  
        if (items.id != this.chapterId) {
          this.dpiaSimpleAnswerPagination = {
            page: 1,
            pageSize: 10,
            total: 0,
            current: 1,
          }
        }
  
        try {
          this.chapterId = items.id
          // 默认获取第一章节
          const { data: dpiaSimpleAnswerObject } = await dpiaSimpleAnswer({
            id: this.id,
            DpiaChapterId: items.id,
            lang: this.lang ? 0 : 1,
          })
          const { Page, PageSize, Total, Lists,Question2 ,Question2Topic} = dpiaSimpleAnswerObject
        
          this.Question2Topic = Question2Topic
          this.dpiaSimpleAnswerLists = Lists
          this.dpiaSimpleAnswerLists2 = Question2
          this.dpiaSimpleAnswerPagination = {
            page: Page,
            pageSize: PageSize,
            total: Total,
          }
  
          const { page, pageSize } = this.dpiaSimpleActionPagination
          // 默认获取第一章节
          const { data: dpiaSimpleActionObject } = await dpiaSimpleAction({
            Id: this.id,
            ChapterId: this.chapterId,
            page,
            pageSize,
          })
          const {
            Page: page1,
            PageSize: pageSize1,
            Total: total1,
            Lists: Lists1,
          } = dpiaSimpleActionObject
  
          this.dpiaSimpleActionLists = Lists1
          this.dpiaSimpleActionPagination = {
            page: page1,
            pageSize: pageSize1,
            total: total1,
          }
        } catch (error) {
          console.log('error:', error)
          this.$message.error(error)
        }
      },
    },
  }
  </script>
  
  <style lang="less" scoped>
  /deep/.ant-card-body {
    // display: flex;
  
    .buttomm {
      width: 100%;
    }
  
    .card-box {
      font-size: 15.5px;
      display: flex;
    }
  
    .card-left {
      /*rectangle copy 4备份 87*/
      margin: 20px 30px 20px 20px;
      color: #444e84;
      left: 339px;
      top: 287px;
      width: 388px;
      min-height: 415px;
      opacity: 0.67;
      border-radius: 2px;
      background: #f7faff;
  
      ul {
        margin-top: 10px;
      }
  
      ul li {
        padding: 3px;
      }
    }
  
    .left-title {
      color: #050c34;
      width: 100%;
      line-height: 40px;
      padding: 0 10px;
      padding-left: 20px;
      background: #e7f0ff;
      border-bottom: 1px solid #ddd;
    }
  
    .card-right {
      width: 100%;
    }
  
    p {
      color: #000;
    }
  }
  
  .tags {
    left: 298px;
    top: 288px;
    width: 6px;
    height: 14px;
    opacity: 1;
    border-radius: 2px;
    background: rgba(0, 80, 247, 1);
  }
  </style>